<template>
  <div id="add">
    <h3>欢迎光临vue水果店</h3>
    <h3>苹果10￥/斤，折扣8折</h3>
    <div id="add2">
      <span>您要购买多少斤？</span>
      <input type="number" v-model.number="how" />
    </div>
    <button @click="set">结账买单</button>
    <h3>结账单：总价{{ sets }}￥元 折后价{{ count }}￥元 省了{{ reds }}￥元</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      how: '',
      sets: '',
      count: '',
      reds: '',
    }
  },
  methods: {
    set() {
      this.sets = this.how * 10
      this.count = this.sets * 0.8
      this.reds = this.sets - this.count
    },
  },
}
</script>

<style>
#add {
  width: 900px;
  margin: 10px auto;
}
#add2 {
  width: 600px;
  margin: 10px 250px;
}
h3 {
  text-align: center;
}
button {
  margin: 0 400px;
}
</style>
